{% schema %}
{
  "name": "kik-Custom-Details",
  "tag": "section",
  "class": "in-the-box-section",
  "settings": [
    {
      "type": "text",
      "id": "label",
      "label": "Label",
      "default": "🎁 In the Box"
    },
     {
          "type": "text",
          "id": "section_container",
          "label": "Section class",
        }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Box Item",
      "settings": [
        {
          "type": "text",
          "id": "item_name",
          "label": "Item Name"
        }
      ]
    }
  ],
  "max_blocks": 12,
  "presets": [
    {
      "name": "kik-Custom-Details",
      "category": "Custom",
      "blocks": [
        {
          "type": "item",
          "settings": {
            "item_name": "Rokid Max 2"
          }
        },
        {
          "type": "item",
          "settings": {
            "item_name": "Rokid Station"
          }
        },
        {
          "type": "item",
          "settings": {
            "item_name": "Blackout Cover"
          }
        },
        {
          "type": "item",
          "settings": {
            "item_name": "USB-C Cable"
          }
        },
        {
          "type": "item",
          "settings": {
            "item_name": "Nose Pads"
          }
        }
      ]
    }
  ]
}
{% endschema %}
<div class="container">
<div class="in-the-box {{ section.settings.section_container }}">
  <h3 class="h2 rokid-roy">Rokid AR JOY 2</h3>
  <h2>{{ section.settings.label }}</h2>
  <ul>
    {% for block in section.blocks %}
      {% if block.type == 'item' %}
        <li>{{ block.settings.item_name }}</li>
      {% endif %}
    {% endfor %}
  </ul>
</div>
</div>
<style>

.in-the-box h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.in-the-box ul {
  list-style: disc;
  padding-left: 1.5rem;
}
.in-the-box li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
</style>
